<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
  </head>
  <style>
    .countdown {
      width: 190px;
      height: 100%;
      color: #fff;
      background-color: #e83632;
      background-image: url('./jd.png');
      background-size: contain;
      background-position: 50%;
      background-repeat: no-repeat;
      padding: 1px 0;
      margin: 0px auto;
    }

    .countdown .countdown-title {
      width: 100%;
      text-align: center;
      font-size: 30px;
      font-weight: 700;
      margin-top: 31px;
    }


    .countdown .countdown-desc {
      margin-top: 90px;
      font-size: 14px;
      text-align: center;
    }

    .countdown .countdown-main {
      margin-left: auto;
      margin-right: auto;
      width: 130px;
      height: 30px;
      margin-top: 10px;
      display: block;
      margin-bottom: 30px;
    }

    .countdown .countdown-main .timmer__unit {
      position: relative;
      float: left;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: #2f3430;
      margin-right: 20px;
      color: white;
      font-size: 20px;
    }

    .timmer__unit--hour::after {
      content: ":";
      width: 30px;
       display: block; 
    }

    .timmer__unit--second {
      margin-right: 0px !important;
    }
  </style>

  <body>
    <div class="countdown">
      <div class="countdown-title">京东秒杀</div>
      <div class="countdown-desc"><strong></strong>点场 距结束</div>
      <span class="timmer countdown-main">
        <span class="timmer__unit timmer__unit--hour"></span>
        <span class="timmer__unit timmer__unit--minute"></span>
        <span class="timmer__unit timmer__unit--second"></span>
      </span>
    </div>
  </body>
  <script>
    /* 
    倒计时：
        1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
        2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
        3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
    转换公式如下： 
          d = parseInt(总秒数/ 60/60 /24);    //  计算天数
          h = parseInt(总秒数/ 60/60 %24)   //   计算小时
          m = parseInt(总秒数 /60 %60 );     //   计算分数
          s = parseInt(总秒数%60);               //   计算当前秒数 
     */
    function countdown(time) {
      var now = new Date().getTime();
      var timer = new Date(time).getTime();
      var countDowntime = timer - now;
      var countHour = new Date(time).getHours();
      //1.计算倒计时秒数
      var seconds = countDowntime / 1000;
      var d = parseInt(seconds / 60 / 60 / 24);
      d = d < 10 ? '0' + d : d;
      var h = parseInt(seconds / 60 / 60 % 24);
      h = h < 10 ? '0' + h : h;
      var m = parseInt(seconds / 60 % 60);
      m = m < 10 ? '0' + m : m;
      var s = parseInt(seconds % 60);
      s = s < 10 ? '0' + s : s;
      //2.将天数，小时，分数，秒数展示在span里
      var hour = document.querySelectorAll(".timmer__unit--hour")[0];
      var minutes = document.querySelectorAll(".timmer__unit--minute")[0];
      var seconds = document.querySelectorAll(".timmer__unit--second")[0];

      hour.innerHTML = h;
      minutes.innerHTML = m;
      seconds.innerHTML = s

      //3.将倒计时几点展示在strong里
      var countH = document.querySelector(".countdown-desc>strong");
      countH.innerHTML = countHour;
    }

    //4.驱动定时函数
    setInterval(function () {
      countdown("2021-05-19 23:30:00");
    }, 1000)
  </script>

</html>